<template>
	<view class="vip-right">
		<view class="vip-title">会员卡券</view>
		<image class="banner" src="/static/img/mine/right-banner.png"></image>
		<view class="info">
			<view class="time-box">
				<text class="title">开始期限</text>
				<text v-show="userinfo.mb_open_time" class="val">{{userinfo.mb_open_time | timeFormat}}</text>
			</view>
			<view class="time-box">
				<text class="title">结束期限</text>
				<text v-show="userinfo.mb_open_time" class="val">{{userinfo.mb_end_time | timeFormat}}</text>
			</view>
			<div class="count-box">
				<text class="title">剩余次数</text>
				<text class="val">{{serviceNumber}}次</text>
			</div>
		</view>
		<view class="vip-title">会员权益</view>
		<image class="adv-img" v-if="advKey" :src="advImg" mode="widthFix"></image>
		<view v-if="type!='hide'" class="bottom">
			<view class="left">
				<view class="price-box"><text class="label">￥</text><text class="price">{{price}}</text></view>
				<view class="agreement">
					<image class="icon" @tap="toogleSelect" :src="isSelect ? '/static/img/mine/selected.png' : '/static/img/mine/is-select.png'"></image>
					<text class="tag" @tap="goAgreement">同意<text class="go">《会员协议》</text></text>
				</view>
			</view>
			<view :class="['buy', {'ac': isBuy}]" @tap="renew">{{isBuy ? '立即开通' : '已经开通' }}</view>
		</view>
	</view>
</template>

<script>
	import storage from '@/commen/utils/storage'
	import {
		getUserInfo,
		getBuyInfo,
		buyVip
	} from '@/commen/js/config'
	import {
		toDate
	} from '@/commen/utils/utils'

	export default {
		data() {
			return {
				isSelect: false, // 是否认同协议
				userinfo: {}, // 用户信息
				price: 0, // 续费价格
				serviceNumber: 0, // 次数
				type: '', // 模式
				advImg: '', // 广告
				advKey: true, // 广告开关
			};
		},
		onLoad(ops) {
			this.type = ops.type || ''
			this.getUserInfo()
			this.getBuyInfo()
		},
		filters: {
			// 过滤时间
			timeFormat(time) {
				let res = toDate(time)
				return `${res[0]}-${res[1]}-${res[2]} ${res[3]}:${res[4]}:${res[5]}`
			}
		},
		computed: {
			// 是否可以购买
			isBuy() {
				let res
				if (this.serviceNumber === 0 || this.userinfo.mb_end_time < this.userinfo.time) {
					res = true
				} else {
					res = false
				}
				return res
			}
		},
		methods: {
			// 认同/取消认同协议
			toogleSelect() {
				this.isSelect = !this.isSelect
			},
			// 关闭广告
			closeAdv() {
				this.advKey = false
			},
			// 续费
			async renew() {
				if (!this.isBuy) return
				if (this.$isEmpty(this.isSelect, '请先同意会员协议！')) return
				const params = {
					token: storage.get('token')
				}
				const [commitErr, commitRes] = await buyVip(params)
				if (!commitRes) return
				const [payErr, payRes] = await new Promise((resolve, reject) => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: String(commitRes.pay_info.timeStamp),
						nonceStr: commitRes.pay_info.nonceStr,
						package: commitRes.pay_info.package,
						signType: commitRes.pay_info.signType,
						paySign: commitRes.pay_info.paySign,
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {
							reject(err)
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}).then(res => [null, res]).catch(err => [err])
				if (payRes) {
					this.$toast('开通成功')
					this.init()
					uni.$emit('refreshUserInfo')
				}
			},
			// 初始化
			init() {
				this.getUserInfo()
			},
			// 获取用户信息
			async getUserInfo() {
				const params = {
					token: storage.get('token')
				}
				const [err, res] = await getUserInfo(params)
				if (res) {
					this.userinfo = res.info
					this.serviceNumber = res.info.service_number
					// 更新缓存中的会员时间和次数
					const {
						mb_open_time,
						mb_end_time,
						service_number
					} = res.info
					storage.set('mb_open_time', mb_open_time, 'userinfo')
					storage.set('mb_end_time', mb_end_time, 'userinfo')
					storage.set('service_number', service_number, 'userinfo')
				}
			},
			// 获取购买会员信息
			async getBuyInfo() {
				const [err, res] = await getBuyInfo()
				if (!res) return
				this.price = res.info.price
				this.advImg = res.info.marketing_advertisement
			},
			// 前往协议
			goAgreement() {
				this.$open('/pages/common/agreement/agreement')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.vip-right {
		@include box-w(100%, $bg-i);

		.vip-title {
			@include font-set($font-d, $color-c, 600);
			padding: 45rpx 30rpx 20rpx
		}

		.banner {
			@include box-b(100%, 316rpx)
		}

		.info {
			background-color: $bg-c;
			padding: 40rpx 30rpx 40rpx;

			.time-box,
			.count-box {
				@include font-set($font-b, $color-c);
				@include flex-row(space-between);

				.title {
					font-size: $font-d
				}
			}

			.count-box {
				margin-top: 24rpx;
			}
		}

		.adv-img {
			@include box-w(100%);
			margin-top: 30rpx;
			margin-bottom: 280rpx;
		}

		.bottom {
			@include box(650rpx, 156rpx, $bg-c);
			border-radius:52rpx;
			padding: 0 50rpx;
			box-shadow:0 12px 24px rgba(0,0,0,0.16);
			@include bottom(64rpx, fixed);
			@include flex-row(space-between);

			.left {
				.price-box {
					@include flex-row(flex-start);
					@include font-set($font-a, $color-i, 500);
					
					.label{
						align-self: flex-end;
						margin-bottom:8rpx;
					}

					.price {
						font-size: 56rpx;
					}
				}

				.agreement {
					@include flex-row(flex-start);
					@include font-set($font-b, $color-d);

					.icon {
						@include square(36rpx);
						margin-right: 15rpx;
					}

					.go {
						color: #333;	
					}
				}
			}


			.buy {
				@include box(260rpx, 80rpx, $bg-f);
				border-radius: 32rpx;
				@include flex-row();
				@include font-set($font-d, $color-a, 500);

				&.ac {
					background: $bg-a;
				}
			}
		}
	}
</style>
